<!-- 大量需要改，但功能算最全的版本了，包括引用弹窗的功能 -->
<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="200px">
                <information />
            </el-aside>
            <el-main>
                This is competition
                <div>
                    <!-- 原按钮保持不变 -->
                    <el-button type="primary" @click="dialogVisible = true">
                        打开弹窗
                    </el-button>

                    <!-- 使用弹窗组件 -->
                    <ConfirmDialog v-model="dialogVisible" title="操作确认" content="确定要执行此操作吗？" :confirm-loading="loading"
                        @confirm="handleConfirm" @cancel="handleCancel" />
                </div>
            </el-main>
        </el-container>
    </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue'
  import Information from './information.vue';
  import ConfirmDialog from '@/views/VenueAdmin/Competition/confirmDialog.vue'
  
  const dialogVisible = ref(false)
  const loading = ref(false)
  
  const handleConfirm = async () => {
    loading.value = true
    try {
      // 执行确认操作
      await new Promise(resolve => setTimeout(resolve, 1000))
      console.log('操作确认')
      dialogVisible.value = false
    } finally {
      loading.value = false
    }
  }
  
  const handleCancel = () => {
    console.log('操作取消')
  }
  </script>